<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>注册</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/static/css/sm.min.css">
    <link rel="stylesheet" href="/static/css/sm-extend.min.css">

    <style>
        .list-block .item-title.label {
            width: 3rem;
        }
        .check{
            border: solid 1px red!important;
        }
        .title {
            position: absolute;
            display: block;
            width: 50%;
            padding: 0;
            margin: auto;
            font-size: .85rem;
            font-weight: 500;
            line-height: 2.2rem;
            color: #3d4145;
            text-align: center;
            white-space: nowrap;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>

<body>

<header class="bar bar-nav">
    <a class="icon icon-left pull-left" href="javascript:history.go(-1)"></a>
    <a href="/page/loginUI" class="pull-right" style="padding: .5rem">登录</a>
    <h1 class="title">用户注册</h1>
</header>


<div class="content">
    <div class="list-block">
        <ul>
            <!-- Text inputs -->
            <li>
                <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-email"></i></div>
                    <div class="item-inner">
                        <div class="item-title label">邮箱</div>
                        <div class="item-input">
                            <input type="email" name="email" placeholder="E-mail">
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-email"></i></div>
                    <div class="item-inner">
                        <div class="item-title label">手机</div>
                        <div class="item-input">
                            <input type="number" name="phone" placeholder="phone">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-name"></i></div>
                    <div class="item-inner">
                        <div class="item-title label">昵称</div>
                        <div class="item-input">
                            <input type="text" name="nickname" placeholder="Nickname">
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-name"></i></div>
                    <div class="item-inner">
                        <div class="item-title label">账号</div>
                        <div class="item-input">
                            <input type="text" name="username" placeholder="Username">
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-password"></i></div>
                    <div class="item-inner">
                        <div class="item-title label">密码</div>
                        <div class="item-input">
                            <input type="password" name="password" placeholder="Password" class="">
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-password"></i></div>
                    <div class="item-inner">
                        <div class="item-title label">确认</div>
                        <div class="item-input">
                            <input type="password" name="repassword" placeholder="rePassword" class="">
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-gender"></i></div>
                    <div class="item-inner">
                        <div class="item-title label">性别</div>
                        <div class="item-input">
                            <select id="mySelect">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="content-block">
        <p><a href="javascript:void(0);" onclick="check()" class="button button-big button-fill">注册 </a></p>
    </div>
</div>


<script type='text/javascript' src='/static/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm-extend.js' charset='utf-8'></script>
<script type="text/javascript">

    var emailRegex=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    var phoneRegex=/^([1][3,4,5,7,8,9][0-9]\d{8})$/;
    var nicknameRegex=/^[a-zA-z0-9\u4E00-\u9FA5]{1,10}$/;
    var usernameRegex=/^[A-Za-z0-9]{6,16}$/;
    var passwordRegex=/(?!^\\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{8,16}/;
    var birthdayRegex = /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/;

    var email = $('input[name = "email"]');
    var phone = $('input[name = "phone"]');
    var nickname = $('input[name = "nickname"]');
    var username = $('input[name = "username"]');
    var password = $('input[name = "password"]');
    var repassword = $('input[name = "repassword"]');
    var birthday = $('input[name = "birthday"]');
    var type = 0;//0为普通用户
    var sex = $('#mySelect').val();
    function check(){
        if(!emailRegex.test(email.val())){
            $.toast("请输入正确的邮箱");
            email.addClass("check");
        }else if(!phoneRegex.test(phone.val())){
            $.toast("请输入正确电话号码");
            phone.addClass("check");
        }else if(!nicknameRegex.test(nickname.val())){
            $.toast("昵称不能带标点符号和空格，且不能超过10个字符");
            nickname.addClass("check");
        }else if(!usernameRegex.test(username.val())){
            $.toast("账号只由是字母和数字组成且长度为6-16位");
            username.addClass("check");
        }else if(!passwordRegex.test(password.val())){
            $.toast("密码必须包含字母数字字符且不少于8位");
            password.addClass("check");
        }else if(repassword.val() != (password.val())){
            $.toast("两次密码不一致");
            repassword.addClass("check");
        }else{
            $.ajax({
                type: 'post',
                url: '/sys/user/register',
                dataType: 'json',
                data:{
                    username: nickname.val(),
                    password: repassword.val(),
                    loginname:username.val(),
                    email:email.val(),
                    phone:phone.val(),
                    sex:sex,
                    type:type
                },
                success: function (re) {
                    if (!re.status){
                        $.toast("注册成功！",1000);
                        setTimeout(function () {
                            window.location.href = "/page/loginUI"
                        },1000);
                    }else {
                        $.toast(re.msg);
                    }
                }
            });
        }
    }


    //    <!-- 表单验证-->

    $('input[name = "email"]').blur(function(){
        if(!emailRegex.test(email.val())){
            $.toast("请输入正确的邮箱");
            email.addClass("check");
            return false;
        }else{
            email.removeClass("check");
        }
    });

    $('input[name = "phone"]').blur(function(){
        if(!phoneRegex.test(phone.val())){
            $.toast("请输入正确电话号码");
            phone.addClass("check");
            return false;
        }else{
            phone.removeClass("check");
        }
    });

    $('input[name = "nickname"]').blur(function(){
        if(!nicknameRegex.test(nickname.val())){
            $.toast("昵称不能带标点符号和空格，且不能超过10个字符");
            nickname.addClass("check");
            return false;
        }else{
            nickname.removeClass("check");
        }
    });

    $('input[name = "username"]').blur(function(){
        if(!usernameRegex.test(username.val())){
            $.toast("账号只由是字母和数字组成且长度为6-16位");
            username.addClass("check");
            return false;
        }else{
            username.removeClass("check");
        }
    });

    $('input[name = "password"]').blur(function(){
        if(!passwordRegex.test(password.val())){
            $.toast("密码必须包含字母数字字符且不少于8位");
            password.addClass("check");
            return false;
        }else{
            password.removeClass("check");
        }
    });

    $('input[name = "repassword"]').blur(function(){
        if(repassword.val() !=(password.val())){
            $.toast("两次密码不一致");
            repassword.addClass("check");
            return false;
        }else{
            repassword.removeClass("check");
        }
    });
</script>
</body>

</html>